<template>
  <div>
    <div class="leftContent d-flex">
      <el-scrollbar :max-height="maxHeight">
        <box class="mb-3" :wvalueth="480" :title="'数据管理'">
          <div class="mb-1">
            <p class="font-lan-gray-60">地图管理：</p>
            <el-row :gutter="16">
              <el-col :span="12">
                <coverage v-model="data.select" :placeholder="'图层管理'" :options="data.coverage" @change="slecetChange" />
              </el-col>
              <el-col :span="12">
                <maptype />
              </el-col>
            </el-row>
          </div>
          <div class="mb-1">
            <p class="font-lan-gray-60">数据来源：</p>
            <scCascader v-model="data.pullData" :placeholder="'数据管理'" :options="data.pullDatas" :label="'name'"
              :value="'id'" @change="acscaderChange" />
          </div>
          <div>
            <p class="font-lan-gray-60">数据范围：</p>
            <scCascader v-model="data.cascader" :placeholder="'地址管理'" :options="data.address" :label="'name'"
              :value="'id'" @change="acscaderChange" />
          </div>
        </box>
        <box class="mb-3" :wvalueth="480" :title="'高标准农田统计'">
          <decorate1 class="mb-2">
            <div class="d-flex jc-between">
              <div class="d-flex ai-center">
                <img :src="farmland" alt="">
                <span class="font-lan ml-3">农田数量：</span>
              </div>
              <div>
                <span class="font-num-l">{{ data.projectData.number }}</span>
                <span class="font-lan">个</span>
              </div>
            </div>
          </decorate1>
          <decorate1>
            <div class="d-flex jc-between">
              <div class="d-flex ai-center">
                <img :src="area" alt="">
                <span class="font-lan ml-3">农田总面积：</span>
              </div>
              <div>
                <span class="font-num-l">{{ data.projectData.areaNumber }}</span>
                <span class="font-lan">亩</span>
              </div>
            </div>
          </decorate1>
        </box>
        <box :wvalueth="480" :title="'农田面积分布'">
          <div class="d-flex ai-center mb-2">
            <div class="echart mr-3">
              <pieB :data="{
                title:'农田数量',
                showTitle: true,
                color: data.farmlands.map((item) => item.background),
                list: data.farmlands
              }" />
            </div>
            <div class="flex-1">
              <div v-for="(item, index) in data.farmlands" :key="index"
                class="chartItem d-flex ai-center jc-between mb-2">
                <div>
                  <span class="chartIcon mr-2" :style="{ background: item.background }"></span>
                  <span class="font-lan">{{ item.name }}</span>
                </div>
                <div class="font-lan">{{ item.value }}%</div>
              </div>
            </div>
          </div>
          <div>
            <div v-for="(item, index) in data.farmlands" :key="index" class="d-flex ai-center mb-1">
              <img class="mr-2" :src="decorate2" alt="">
              <div class="flex-1 ">
                <div class="d-flex ai-center jc-between">
                  <div>
                    <span class="font-lan">{{ item.name }}</span>
                    <span class="font-lan-gray-60">（{{ item.des }}）</span>
                  </div>
                  <div>
                    <span class="font-lan">{{ item.count }}</span>
                    <span class="font-lan-gray-60-s">个</span>
                  </div>
                </div>
                <div>
                  <el-progress :show-text="false" :percentage="item.value"></el-progress>
                </div>
              </div>
            </div>
          </div>
        </box>
      </el-scrollbar>
      <div class="icons ml-3">
        <div v-for="(item, index) in data.farmlands" :key="index" class="iconInfo d-flex ai-center">
          <div class="icon" :style="{backgroundColor:item.background}"></div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="rightContent">
      <el-scrollbar :max-height="maxHeight">
        <box :width="480" :title="'农田检索'">
          <div>
            <!-- <el-row :gutter="24" class="mb-3">
              <el-col :span="24">
                <el-input v-model="searchData.personConfirmation" placeholder="按照权属人搜索" @change="getTableList()"
                  clearable />
              </el-col>
            </el-row> -->
            <div class="chartTable">
              <el-table :data="tableData" size="small" :height="270">
                <el-table-column type="index" label="排名" width="40" />
                <el-table-column prop="projectName" label="项目名称" width="90"></el-table-column>
                <el-table-column prop="buildUnit" label="建设单位"></el-table-column>
                <el-table-column prop="createTime" label="建设时间" width="80">
                  <template #default="scope">
                    {{ moment(scope.row.createTime).format('YYYY-MM-DD') }}
                  </template>
                </el-table-column>
                <el-table-column prop="area" label="面积(亩)" width="60">
                  <template #default="scope">
                    {{ parseFloat(scope.row.area).toFixed(1) }}
                  </template>
                </el-table-column>
                <el-table-column prop="place" label="地点" />
              </el-table>
              <div style="padding: 4px">
                <span class="description">当前结果共计显示：</span><span class="font-lan-m">项目数量{{ tableData.length }}，{{
                  tableData.reduce((sum, item) => sum + parseFloat(item.area), 0).toFixed(2)
                }}亩</span>
              </div>
            </div>
          </div>
        </box>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted, computed } from "vue";
import pieB from "@/chart/pieChart/pic-bole";
import { calculateCenter, clone } from "@/utils/common";
import mapControler from "@/components/mapContainer/mapControler";
import { useRouter } from 'vue-router';
import storage from '@/store'
import {
  tableList,
  getArea,
  getPull,
  projectStatistics,
  colourList
} from "@/public/request/http";
import moment from "moment";

export default defineComponent({
  components: {
    pieB,
  },
  setup() {
    //变量
    const maxHeight = computed(() => window.innerHeight - 160 + 'px')
    const router = useRouter()
    const data: any = reactive({
      coverage: [],
      pullDatas: [],
      pullData: [],
      select: null,
      cascader: [],
      address: [],
      farmlands: [
        { name: '大型农田', value: '', background: '#93F5E1', des: '500亩以上', count: 0 },
        { name: '中型农田', value: '', background: '#93AAF5', des: '200-500亩', count: 0 },
        { name: '小型农田', value: '', background: '#93DBF5', des: '200亩以下', count: 0 }],
      pidData: {
        list: []
      },
      projectData: {},
    });
    const tableData = ref([]);
    const searchData: any = reactive({
      personConfirmation: null,
      district: [],
      option1: 1,
      option2: 1,
    });
    const decorate1 = require("@/assets/img/decorate1.png");
    const farmland = require("@/assets/img/farmland.png");
    const area = require("@/assets/img/area.png");
    const decorate2 = require("@/assets/img/decorate2.png");
    // 生命周期
    onMounted(async () => {
      //
      await getColourList()
      getAreaData()
      getPullData()
      getTableList()
      getProjectStatistics()
      mapControler.mapReSet();
      // storage.commit('changeMapType',0)

    });

    onUnmounted(() => {
      //
      mapControler.mapReSet();
    });

    //methods
    const getColourList = async () => {
      try {
        let res = await colourList();
        storage.commit('changeBoundary',{
          color:res[0].coding,
          weight:res[0].weight,
          id:res[0].id
        })
      } catch (error) {
        return
      }
    }

    const getPullData = async () => {
      try {
        let res = await getPull();
        storage.commit('changeDataSources', res)
        data.pullDatas = [res[router.currentRoute.value.meta.index]]
      } catch (error) {
        return
      }
    }

    const getProjectStatistics = async () => {
      try {
        let res = await projectStatistics({
          batchId: data.pullData.length > 0 ? data.pullData[data.pullData.length - 1].id : null,
          areaId: data.cascader.length > 0 ? data.cascader[data.cascader.length - 1].id : null,
        });
        data.projectData = res
        res.list.reverse().forEach((item, index) => {
          data.farmlands[index].value = parseFloat(item.ratio)
          data.farmlands[index].count = item.value
        })
      } catch (error) {
        return
      }
    }


    const getTableList = async () => {
      try {
        let res = await tableList({
          batchId: data.pullData.length > 0 ? data.pullData[data.pullData.length - 1].id : null,
          areaId: data.cascader.length > 0 ? data.cascader[data.cascader.length - 1].id : null
        });
        tableData.value = res.dataTable
        // tableData.value = res
        // res.forEach(item => {
        //   item.color = 'rgba(61, 204, 147, 1)'
        //   item.fillColor = 'rgba(61, 204, 147, 0.60)'
        //   let point = calculateCenter(item.pointList)
        //   item.point = point
        //   item.sign = 1
        //   item.type = '投入品'
        //   mapControler.drawArea(item);
        // });
      } catch (error) { }
    }

    const getAreaData = async () => {
      try {
        let res = await getArea();
        storage.commit('changeArea', res.data)
        data.address = res.data
      } catch (error) { }
    }

    const slecetChange = (e) => {
      console.log(e);

    }

    const acscaderChange = (e) => {
      getTableList()
      getProjectStatistics()
    }

    const moveTo = (val) => {
      let point = calculateCenter(val.pointList)
      val.point = point
      val.owner = val.hostName
      val.count = val.peopleNumber
      val.group = val.organization
      val.address = val.familyAddress
      val.type = val.contractType
      val.contractTime = val.contractStartTime
      mapControler.openPolygonWindow(val, '确权')
      mapControler.mapMoveTo(point)
    }

    // return
    return {
      data,
      area,
      decorate2,
      decorate1,
      farmland,
      tableData,
      searchData,
      slecetChange,
      acscaderChange,
      moment,
      maxHeight,
      getTableList,
      moveTo,
      storage,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.echart {}

.chartItem {
  padding: 4px 8px;
  background: rgba(153, 207, 255, 0.08);

  .chartIcon {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #93F5E1;
    border-radius: 2px 2px 2px 2px;
  }
}
</style>
